import { Tabs } from 'antd'
import useConfigs from './hooks/useConfigs'
import styles from './index.module.less'

const { TabPane } = Tabs

const Panel = () => {
  const { activeKey, setActiveKey, configs } = useConfigs()

  return (
    <div className={styles.panel}>
      <Tabs
        activeKey={activeKey}
        onTabClick={(key) => setActiveKey(key)}
        type="card"
        className={styles[configs.length === 1 ? 'only' : '']}
      >
        {configs.map((item) => (
          <TabPane tab={item.label} key={item.value}>
            <item.element configs={item.configs} value={item.data} onChange={item.onChange} />
          </TabPane>
        ))}
      </Tabs>
    </div>
  )
}

export default Panel
